<template>
    <div class="join_worker" v-wechat-title="$route.meta.title">
        <div class="banner">
            <div class="shadow">
                <span class="tit">请选择小二哥干活</span>
                <span class="dec">现在加入最高享3万元运营补贴！</span>
                <!-- <span class="tel">合作：400-880-6604</span> -->
            </div>
        </div>
        <div class="floor_1">
            <span class="tit">为什么要成为劳务市场合作伙伴</span>
            <div class="card_box">
                <div class="card">
                    <div class="tit">
                        <img src="../../assets/image/join/worker/icon_1.png" alt="">
                        <span>趋势</span>
                    </div>
                    <span class="dec">10年之前，找工作都去人才市场，现在都在网上找工作，传统人才市场已消失，这是趋势！<br>所以传统劳务市场也将消失，被新型劳务市场取代，这也是趋势！</span>
                </div>
                <div class="card">
                    <div class="tit">
                        <img src="../../assets/image/join/worker/icon_2.png" alt="">
                        <span>市场现状</span>
                    </div>
                    <span class="dec">现在的劳务市场还是以前非常传统的状态。<br>需要凌晨4点赶到劳务市场等活儿（订单），来个活（订单），一群人一拥而上，需要眼疾手快，跟上战场一样才能有机会抢个活儿。<br>现在的科技如此发达了，竟然没有在这个行业感受到。</span>
                </div>

            </div>
            <div class="img_ls">
                <img src="../../assets/image/join/worker/img_ls_1.png" alt="">
                <img src="../../assets/image/join/worker/img_ls_2.png" alt="">
                <img src="../../assets/image/join/worker/img_ls_3.png" alt="">
                <img src="../../assets/image/join/worker/img_ls_4.png" alt="">
                <img src="../../assets/image/join/worker/img_ls_5.png" alt="">
            </div>
        </div>
        <div class="floor_2">
            <div class="box">
                <div class="item">
                    <span class="tit">顺风顺势</span>
                    <span class="dec">契合市场发展方向<br>政策保驾护航</span>
                </div>
                <div class="item">
                    <span class="tit">颠覆传统</span>
                    <span class="dec">摒弃传统招工模式<br>开启行业创新</span>
                </div>
                <div class="item">
                    <span class="tit">以质取胜</span>
                    <span class="dec">高质量雇工雇主<br>流程严格把控</span>
                </div>
                <div class="item">
                    <span class="tit">邀您同行</span>
                    <span class="dec">轻松找活<br>小二哥与您同行</span>
                </div>
            </div>
        </div>
        <div class="floor_3">
            <span class="tit">平台优势</span>
            <div class="box">
                <div class="left">
                    <span class="tit">实时召集工人+今天定明天的工人</span>
                    <span class="dec">手机劳务市场，动动手指就能发布工作，滴滴模式、竞价模式、技工模式等多种模式，方便高效。</span>
                    <span class="dec">所有的用工方都可以在招工广场，直接发布用工需求，工人可以选择适合自己的工作，为企业和工人提供最方便的服务。</span>
                    <span class="tit">完善的保障体系</span>
                    <span class="dec">平台建立了信用驾驶证、履约保证金以及信誉评估系统。</span>
                    <span class="dec">解决了雇主担心工人是否用心干活的问题，同时也解决了工人担心雇主不履约的问题。</span>
                    <span class="tit">一台手机就是一个劳务市场，工人永不流失，永远属于你！</span>
                </div>
                <div class="right">
                    <img src="../../assets/image/join/worker/floor_3.png" alt="">
                </div>
            </div>
        </div>
        <div class="floor_4"></div>
        <div class="floor_5">
            <span class="title">合作伙伴</span>
            <span class="dec">超过5万次合作，为一百余家全球知名企业实现用工配套无缝对接</span>
            <img src="@/assets/image/logo_group.png" alt="">
        </div>
    </div>
</template>

<script>
export default {
    name: 'Worker'
}
</script>

<style lang="less" scoped>
.join_worker {
    width: 1920px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;

    .banner {
        width: 100%;
        height: 500px;
        background: url('../../assets/image/join/worker/banner.png');
        background-size: 100% 100%;
        position: relative;

        .shadow {
            position: absolute;
            bottom: 0;
            left: 129px;
            width: 755px;
            height: 362px;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 30px 30px 0px 0px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            letter-spacing: 2px;
            color: #FFFFFF;

            .tit {
                font-size: 40px;
                margin: 65px 0 0 61px;
            }

            .dec {
                font-size: 24px;
                margin: 20px 20px 0 61px;
                line-height: 30px;
                font-weight: 300;
                margin-bottom: auto;
            }

            .tel {
                font-size: 30px;
                margin: 0 0 65px 61px;
            }
        }
    }

    .floor_1 {
        width: calc(100% - 165px * 2);
        padding: 134px 165px 178px 165px;
        display: flex;
        flex-direction: column;

        .tit {
            font-size: 40px;
            display: block;
            margin-bottom: 70px;
        }

        .card_box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 57px;

            .card {
                width: 734px;
                height: 290px;
                background: #FFFFFF;
                box-shadow: 6px 0px 12px rgba(186, 186, 186, 0.25);
                position: relative;
                display: flex;
                flex-direction: column;

                &::before {
                    position: absolute;
                    left: 0;
                    top: 0;
                    content: '';
                    display: inline-block;
                    height: 100%;
                    width: 18px;
                    background: linear-gradient(180deg, rgba(255, 245, 0, 0.6) 0%, rgba(255, 168, 0, 0.6) 100%);
                }

                .tit {
                    font-size: 30px;
                    margin: 49px 0 40px 42px;
                    display: flex;
                    align-items: center;

                    img {
                        height: 32px;
                        width: 28px;
                        margin-right: 16px;
                    }
                }

                .dec {
                    font-size: 18px;
                    line-height: 27px;
                    margin-left: 42px;
                    margin-right: 42px;
                }

                &:last-child {
                    img {
                        height: 24px;
                        width: 32px;
                    }
                }
            }
        }

        .img_ls {
            display: flex;
            align-items: center;
            justify-content: space-between;

            img {
                height: 171px;
                width: 313px;
            }
        }
    }

    .floor_2 {
        width: 100%;
        height: 200px;
        background: url('../../assets/image/join/worker/floor_2.png');
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .box {
            height: 100%;
            width: auto;
            margin: 0 auto;
            overflow: hidden;
            display: flex;
            align-items: center;

            .item {
                width: 400px;
                height: 129px;
                color: #fff;
                border-right: 1px solid #fff;

                &:last-child {
                    border: 0;
                }

                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;

                .tit {
                    font-size: 30px;
                    color: #FFCF00;
                }

                .dec {
                    font-size: 16px;
                    line-height: 24px;
                    display: flex;
                    align-items: center;
                    text-align: center;
                    color: #FFFFFF;
                }
            }
        }
    }

    .floor_3 {
        height: calc(760px - 69px - 90px);
        width: calc(100% - 150px * 2);
        padding: 69px 150px 90px 150px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .tit {
            font-size: 40px;
            line-height: 60px;
            display: flex;
            align-items: center;
            letter-spacing: 2px;
            color: #1F1F1F;
            margin-bottom: 73px;
        }

        .box {
            flex: 1;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .left {
                flex: 1;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .tit {
                    font-size: 30px;
                    line-height: 60px;
                    display: flex;
                    align-items: center;
                    letter-spacing: 2px;
                    color: #1F1F1F;
                    margin: 0;
                }

                .dec {
                    font-size: 18px;
                    line-height: 24px;
                    color: #666666;
                    margin: 0;
                }
            }

            .right {
                width: 676.96px;
                display: flex;
                justify-content: center;
                align-items: center;

                img {
                    width: 549px;
                    height: 302px;
                }
            }
        }
    }

    .floor_4 {
        width: 100%;
        height: 960px;
        background: url('../../assets/image/join/worker/floor_4.png');
        background-size: 100% 100%;
    }

    .floor_5 {
        width: 100%;
        height: 760px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .title {
            font-weight: 500;
            font-size: 40px;
            display: inline-block;
            margin: 129px auto 20px auto;
        }

        .dec {
            font-size: 22px;
            color: #999999;
            margin: 0 auto 47px auto;
        }

        img {
            width: 1480px;
            height: 391px;
            margin: 0 auto;
        }
    }
}</style>